CSS Grid レイアウト

table レイアウトを本当に置き換えることができる仕組み

行列型のレイアウトができる。

要素の出現順とレイアウト位置を完全に独立させることができる。

grid-template プロパティを使うと「見たままのレイアウト」を指定できる(これが大きい)

「顧客が本当に必要だったもの」がやっと出た。

疑似的に Flexbox のような挙動にすることもできる。(自動折り返し)

CSS Flexbox は折り返した後の要素の幅が、折り返した各行で決まってしまう。

CSS Grid の場合は、要素の幅を固定的にできる。(ほとんどの人はこちらの動作を期待するはず)

参考 CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法 https://parashuto.com/rriver/development/responsive-layout-with-css-grid-and-flexbox

grid-template は grid-template-areas と grid-template-rows と grid-template-columns を合わせたもの。

class と CSS で書くより、style に grid-area を直接書いた方が直感的という指摘。

IE11 で使う場合には Autoprefixer を使う。

Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年） https://qiita.com/tonkotsuboy_com/items/bce73685cd6b1ea511dc

欠点

指定方法が煩雑すぎるため、細かな指定に向かない。

ブロック的なレイアウトに使うくらい。

注意点

div レイアウトを使っている場合、div が多段に適用されていることがよくあるが、これは grid では取り扱えない。grid で取り扱われる要素は、その grid のコンテナ要素の直下になければならない。

code:bad.html

<div class="title">title</div>

<div class="value">value</div>

</div>

<div class="title">title</div>

<div class="value">value</div>

</div>

参考

CSS Grid Layoutでwidthを指定してもはみ出て困った https://qiita.com/Hiro2525/items/dba0b8e765e37ea5cfe4